<template>
  <div class="">
    <el-row class="a-body">
      <el-col :span="24">
        <div class="page-filter mb10 fl">
          <el-form ref="filter" :model="filter" label-width="0">
            <el-form-item class="mr10 mb5 fl" prop="date">
              <el-date-picker
                v-model="filter.date"
                placeholder="月度"
                type="month"
                format="yyyy-MM"
                value-format="yyyy-MM"
                size="small"
                clearable
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item class="mr10 mb5 fl" style="width: 300px">
              <el-button size="small" @click="app.resetFields($refs['filter'].$parent,'filter')">清 空</el-button>
              <el-button type="primary" size="small" @click="getList">查 询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="24" class="tac a-title pr">
        月   度   考   勤   表
        <div class="a-line pa"></div>
      </el-col>
      <el-col :span="24">
        <div class="a-tables">
          <div class="a-tables-item">
            <div class="a-tables-item-img a-img1"></div>
            <div class="tac a-tables-item-title">考勤月份</div>
            <div class="tac a-tables-item-content">{{filter.date}}</div>
          </div>
          <div class="a-tables-item">
            <div class="a-tables-item-img a-img2"></div>
            <div class="tac a-tables-item-title">总员工数</div>
            <div class="tac a-tables-item-content">{{ list.length }}</div>
          </div>
          <div class="a-tables-item">
            <div class="a-tables-item-img a-img3"></div>
            <div class="tac a-tables-item-title">全勤人数</div>
            <div class="tac a-tables-item-content">{{ fullDay }}</div>
          </div>
          <div class="a-tables-item">
            <div class="a-tables-item-img a-img4"></div>
            <div class="tac a-tables-item-title">全勤率</div>
            <div class="tac a-tables-item-content">{{ app.toFix((fullDay / list.length) * 100, 2) + '%' }}</div>
          </div>
          <div class="a-tables-item">
            <div class="a-tables-item-img a-img5"></div>
            <div class="tac a-tables-item-title">加班总时长(H)</div>
            <div class="tac a-tables-item-content">{{ overtime }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="mt20 mb20">
        <div id="chartDiv" style="width: 100%; height:240px;" />
      </el-col>
      <el-col :span="24">
        <el-table v-loading="app.loading" class="search-table" :data="list" border 
          :summary-method="getSummaries"
          show-summary
          fit highlight-current-row style="width: 100%;">
          <el-table-column label="序号" align="center" width="56px">
            <template slot-scope="{$index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="员工姓名" width="183px" prop="nickname" />
          <el-table-column label="本月应出勤天数" align="right" width="160px" prop="days" >
            <template slot-scope="{row}">
              {{ row.days + '天' }}
            </template>
          </el-table-column>
          <el-table-column label="实际出勤天数" align="right" width="160px" prop="attendance" >
            <template slot-scope="{row}">
              {{ row.attendance + '天' }}
            </template>
          </el-table-column>
          <el-table-column label="请假(H)" align="right" width="160px" prop="leave" >
            <template slot-scope="{row}">
              {{ row.leave + '小时' }}
            </template>
          </el-table-column>
          <el-table-column label="出差天数" align="right" width="160px" prop="travel" >
            <template slot-scope="{row}">
              {{ row.travel + '天' }}
            </template>
          </el-table-column>
          <el-table-column label="加班时长(H)" align="right" width="160px" prop="overtime" >
            <template slot-scope="{row}">
              {{ row.overtime + '小时' }}
            </template>
          </el-table-column>
          <el-table-column label="本月出勤率" align="right" width="160px" prop="" >
            <template slot-scope="{row}">
              {{ app.toFix((row.attendance / row.days) * 100, 2) + '%' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import page from '@/utils/page'
import * as echarts from 'echarts'
import { attendances } from '@/api/finance/salary'

export default {
  name: '',
  components: { },
  extends: page,
  props: {
    reqList: {
      default: attendances,
      type: Function
    }
  },
  data() {
    return {
      overtime: 0,
      fullDay: 0,
    }
  },
  created() {
    this.getList()
    // this.handleChart()
  },
  methods: {
    getListBefore() {
      if(!(this.filter.date && this.filter.date != '')) this.$set(this.filter, 'date', new Date().getFullYear()+ '-'+ 
      (new Date().getMonth()<9 ? '0' + (new Date().getMonth()+1) : new Date().getMonth() +1)
      )
    },
    getListAfter() {
      let list = this.list
      let jc = {}
      list.forEach(e => {
        let jl = {}
        jl.all = 0
        jl.attendance = 0
        console.log(e);
        if(e.dept_name) {
          let arr = e.dept_name.split(',')
          let len = arr.length
          for(let i=0; i<len; i++) {
            if(jc[arr[i]]) jl = jc[arr[i]]
            jl.all += e.days
            jl.attendance += e.attendance
            jc[arr[i]] = jl
          }
        }
        
      })
      let x = []
      let y = []
      if(jc) {
        for(let key in jc) {
          x.push(key)
          y.push( this.app.toFix((jc[key].attendance / jc[key].all) * 100, 2) )
        }
      }
      this.handleChart(x, y)
    },
    handleChart(x, y) {
      this.$nextTick(()=>{
        var chartDom = document.getElementById('chartDiv');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '部门出勤率',
            subtext: ''
          },
          grid: {
            top: 50,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              interval: 0,
              rotate: 20// 角度顺时针计算的
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: y,
              type: 'line',
              smooth: true,
              showBackground: true,
              label: {
                show: true,
                position: 'top'
              }
            }
          ]
        };

        option && myChart.setOption(option);
      })
    },
    getSummaries() {
      let list = this.list
      let attendance = 0
      let days = 0
      let leave = 0
      let travel = 0
      let overtime = 0
      let count = 0
      list.forEach(e => {
        attendance += e.attendance
        days += e.days
        leave += e.leave
        travel += e.travel
        overtime += e.overtime
        if(e.days <= e.attendance && e.leave === 0) {
          count++
        }
      })
      const sums = []
      sums[0] = '合计'
      sums[2] = days + '天'
      sums[3] = attendance + '天'
      sums[4] = leave + '小时'
      sums[5] = travel + '天'
      sums[6] = overtime + '小时'
      sums[7] = this.app.toFix((attendance / days) * 100, 2) + '%'

      this.overtime = overtime
      this.fullDay = count
      return sums
    }
  }
}
</script>
<style scoped>
.a-body{
  width: 1200px;
}
.a-title{
  color: #FFF;
  background-color: rgb(116, 92, 230);
  word-spacing: 60px;
  font-size: 42px;
  font-weight:lighter;
  height: 80px;
  line-height: 110px;
}
.a-line{
  height: 2px;
  line-height: 2px;
  background-color: #FFF;
  bottom: 0;
  left: 20px;
  right: 20px;
}
.a-tables{
  padding: 20px 20px 0 20px;
  background-color: rgb(116, 92, 230);
  height: 170px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.a-tables-item{
  width: 160px;
  height: 120px;
  background-color: #ffffff;
}
.a-tables-item-img{
  height: 45px;
  background-color: rgb(152, 135, 234);
} 
.a-img1{
  background-image: url("../../../../assets/images/attendance1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.a-img2{
  background-image: url("../../../../assets/images/attendance2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.a-img3{
  background-image: url("../../../../assets/images/attendance3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.a-img4{
  background-image: url("../../../../assets/images/attendance4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.a-img5{
  background-image: url("../../../../assets/images/attendance5.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}
.a-tables-item-title{
  color: rgb(152, 135, 234);
  margin-top: 8px;
  font-size: 18px;
  font-weight: lighter;
}
.a-tables-item-content{
  color: rgb(152, 135, 234);
  margin-top: 16px;
  font-size: 18px;
  font-weight: lighter;
}
</style>
